// out: main.css, compress: false

@import "colors";

// GLOBAL SIZES

@font-size-small: 85%;
@size-input-range-thumb: 15px;
@item-slot-big-width: 55px;
@item-slot-big-height: 70px;
@item-div-size: 18px;
@callout-arrow-size: 7px;
@header-self-bar-width: 60px;


// Base layout & elements

html {
	height: 100%;
}

body {
	font-family: Arial, sans-serif;
	font-size: 11pt;
	height: 100%;
	line-height: 1.3em;
	margin: 0;
    border-width: 0px !important;
}

#grid-main {
	height: 100%;
}

#log {
	background: none;
	max-width: 244px;
	width: 25%;
	padding-right: 50px;
}

#switch, #switch-content {
	padding: 0;
}

#grid-switch {
	margin: 0px !important;
	border: 0;
	padding: 0;
}

.dev-hud {
    opacity: 0.75;
    background: #aaa;
    padding: 1px;
    border-radius: 5px;
    z-index: 100;
}

.dev-hud:hover {
    opacity: 1;
}

.sticky-footer-wrapper {
	min-height: 100%;
	height: auto !important;
	margin: 0 auto -50px;
}

.sticky-footer-push {
	margin:  0;
	height: 50px;
}

.sticky-footer {
	height: 50px;
	padding: 10px 0;
    display: none;
}

.sticky-footer .one-quarter {
	height: 2px;
	padding: 0px;
}

div.grid-content {
	margin: 0px 0px 15px 0px !important;
	padding: 15px;
}

div.grid-content .grid .unit {
	padding-top: 0;
	padding-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Arial Narrow", Arial, sans-serif;
	letter-spacing: 0.1pt;
	text-transform: uppercase;
}

h2:first-child {
    margin-top: 0.5em;
}

h3, h4 {
    margin: 1em 0 0.5em 0;
}

h4 {
    margin: 1em 0 0.5em 0;
}

a {
    border: none !important;
    background: inherit !important;
}

img {
	margin: 0px 2px;
}

.layout-horizontal {
    display: flex;
    align-items: baseline;
}

.layout-item {
    flex-grow: 0.5;
}



/* Loading elements */

.loading-content {
	position:fixed;
	top:0;
	left:0;
    z-index:6;
    width:100%;
    height:100%;
}

.loading-spinner {
    text-align: center;
    width: 100%;
    position: relative;
    top: 50%;
    left: 0;
}

.loading-spinner .loading-dot {
    background: #ccc;
    width: 11px;
    height: 11px;
    margin: 2px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.3s infinite ease-in-out both;
    animation: sk-bouncedelay 1.3s infinite ease-in-out both;
}

.loading-spinner .loading-dot1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loading-spinner .loading-dot2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loading-spinner .loading-dot3 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* -- Layout: General -- */

dl {
	margin: 5em 0;
	padding: 0 25em 0 0;
	max-width: 65em;
}

dt {
	font-weight: bold;
	margin: 1em 0 0 0;
}

dt:before {
	content: "\000BB  ";
	color: #999;
}

dd {
	padding: 2px 0 0 0;
	margin: 0 0 0 2em;
	position: relative;
}

dd p {
	margin: 0.5em 0;
}

dd p.p-meta {
	position: absolute;
	top: -0.5em;
	right: -25em;
	width: 23em;
	border-left: 1px solid;
	padding: 0 0 0 4px;
}

#log ul {
	list-style-type: none;
    padding-left:0;
	margin: 0;
}

#log ul li {
	margin: 0px 0px 0.8em 0px;
}

#log .msg { display: block; }

#switch-context-indicator {
    float: right;
}

#researched-upgrades-vis-container {
    max-height: 300px;
}

.status-badge { float: right; padding: 0 0.75em; border-radius: 1em; height: 1em }

#out-container-compass, #out-container-compass-actions {
    text-align: center;
    width: 208px;
}

#out-container-compass canvas, #out-container-compass-actions table {
    margin-left: auto;
    margin-right: auto;
}

#out-desc {
    padding: 0px;
}

#table-out-actions-movement {
    margin-top: 10px;
}

.canvas-container {
    text-align: center;
    overflow: hidden;
    position: relative;
}

.scroll-position-container {
    padding: 5px;
    position: relative;
    overflow: hidden;
}

.scroll-position-indicator {
    position: absolute;
}

.scroll-position-indicator-vertical {
    width: 100%;
    height: 50%;
    min-height: 10px;
    min-width: 10px;
    top: 10px;
    left: 0;
}

.scroll-position-indicator-horizontal {
    height: 100%;
    width: 50%;
    min-width: 10px;
    min-height: 10px;
    top: 0;
    left: 10px;
}

.scrollable.scroll-enabled {
    cursor: all-scroll;
}



/* -- Appearance: Base colours -- */

.lvl3-bg, body, div.dark, ul#tabs, #switch, #mainmap-container, #header-self-bar {
	background: @color-dark-bg;
	color: @color-dark-text;
}

.sunlit .lvl-13-bg, body.sunlit, div.sunlit, .sunlit ul#tabs, .sunlit #switch, .sunlit #mainmap-container, .sunlit #header-self-bar {
	background: @color-light-bg;
	color: @color-light-text;
}

.lvl13-box-1, div.grid-content, div.popup, ul.tabs li.selected , .item, .res, .li-item-negative, .li-item-positive, .blueprint-piece-box-missing {
	background: @color-dark-bg-box-1;
	border: 2px solid @color-dark-border-box-1;
}

.sunlit .lvl13-box-1, .sunlit div.grid-content, .sunlit .popup, .sunlit ul.tabs li.selected, .sunlit .item, .sunlit .res, .sunlit .li-item-negative, .sunlit .li-item-positive, .sunlit .blueprint-piece-box-missing {
	background: @color-light-bg-box-1;
	border: 1px solid @color-light-border-box-1;
}

.item-equipped, .status-badge {
    background: @color-dark-bg-element;
}

.sunlit .item-equpped, .sunlit .status-badge {
    background: #ececec;
}

ul.tabs li.selected {
	border-color: @color-dark-border-box-1;
	border-bottom-color: @color-dark-bg-box-1;
	border-width: 2px !important;
}

.sunlit ul.tabs li.selected {
	border-color: @color-light-border-box-1;
	border-bottom-color: @color-light-bg-box-1;
	border-width: 1px !important;
}

.cooldown-reqs, .cooldown-duration, ul.resultlist li, .blueprint-piece-box-found {
	background: rgba(200,200,200,0.1);
	border-color: #666;
}

.sunlit .cooldown-reqs, .sunlit ul.resultlist li, .sunlit .blueprint-piece-box-found {
	background: #fff;
	border-color: #bbb;
}

.sunlit .cooldown-duration {
	background: rgba(100,100,100,0.2);
	border-color: #bbb;
}

.lvl13-box-2, .infobox-temporary, .collapsible-container, .infobox-scrollable, .canvas-container {
	border: 1px solid @color-dark-border-box-2;
}

.sunlit .lvl13-box-2, .sunlit .infobox-temporary, .sunlit .collapsible-container, .sunlit .canvas-container  {
	border: 1px solid #aaa;
}

.scroll-position-indicator {
    background: @color-dark-border-box-1;
}

.sunlit .scroll-position-indicator {
    background: #aaa;
}

.collapsible-header, .item-focused .item-count, .progress-bar, .highlightbox, .inventorybox-header, .inventorybox-footer, tr.current {
	background: @color-dark-bg-element;
    border-color: @color-dark-bg-element;
}

.sunlit .collapsible-header, .sunlit .item-focused .item-count, .sunlit .progress-bar, .sunlit .highlightbox, .sunlit .inventorybox-header, .sunlit .inventorybox-footer, .sunlit tr.current {
	background: @color-light-bg-element;
}

td.bg-reset {
    background: @color-dark-bg-box-1;
}

.sunlit td.bg-reset {
    background: @color-light-bg-box-1;
}

.lvl13-box-3, .vis-out-sector {
	border: 1px solid @color-dark-border-box-2;
	background: @color-dark-bg-box-3;
	color: @color-dark-text-box-3;
}

.sunlit .lvl13-box-3, .sunlit .vis-out-sector {
	border: 1px solid @color-light-border-box-2;
	background: @color-light-bg-box-3;
	color: @color-light-text-box-3;
}

.lvl13-element, div.btn-callout-content, div.info-callout-content, button, a:link, a:visited {
	background: @color-dark-bg;
	color: @color-dark-text;
	border: 1px solid #555;
}

.sunlit .lvl13-element, .sunlit div.btn-callout-content, .sunlit div.info-callout-content, .sunlit button, .sunlit a:link, .sunlit a:visited {
	background: rgb(252, 252, 252);
	color: #222222;
	border: 1px solid #aaa;
}

div.container-btn-action, .changelog-type, .notification, .item-slot-equipped, .inventorybox {
	border-color: #555;
}

.sunlit div.container-btn-action, .sunlit .changelog-type, .sunlit .notification, .sunlit .item-slot-equipped, .sunlit .inventorybox {
	border-color: #aaa;
}

.item-slot.highlighted, .item.highlighted {
    border-color: #888;
}

.sunlit .item-slot.highlighted, .sunlit .item.highlighted {
    border-color: #ddd;
}

.item.highlighted {
    background: #444;
}

.sunlit .item.highlighted {
    background: #fdfdfd;
    border-color: #888;
}

.item-slot.highlighted .item-slot-type-equipped {
    background: #444;
}

.sunlit .item-slot.highlighted .item-slot-type-equipped {
    background: #ddd;
}

.lvl13-shadowed, div.btn-callout-content, div.info-callout-content, div.popup {
	-webkit-box-shadow: 1px 2px 7px 3px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:    1px 2px 7px 3px rgba(0, 0, 0, 0.25);
	box-shadow:         1px 2px 7px 3px rgba(0, 0, 0, 0.25);
}

.sunlit .lvl13-shadowed, .sunlit div.btn-callout-content, .sunlit div.info-callout-content, .sunlit div.popup {
	-webkit-box-shadow: 1px 2px 5px 2px rgba(96, 96, 96, 0.25);
	-moz-box-shadow:    1px 2px 5px 2px rgba(96, 96, 96, 0.25);
	box-shadow:         1px 2px 5px 2px rgba(96, 96, 96, 0.25);
}

button {
	border-color: #777;
}

.sunlit button {
	border-color: #777;
}

.lvl13-element-disabled, button.btn-disabled-basic, button.btn-disabled-vision, button.btn-disabled-basic:hover, button.btn-disabled-vision:hover, button.btn-disabled-resources, button.btn-disabled-resources:hover, button.btn-disabled-cooldown, button.btn-disabled-cooldown:hover, li.disabled {
	border-color: #444;
	color: #999 !important;
}

.sunlit .lvl13-element-disabled, .sunlit button.btn-disabled-basic, .sunlit button.btn-disabled-vision, .sunlit button.btn-disabled-vision:hover, .sunlit button.btn-disabled-basic:hover, .sunlit button.btn-disabled-resources, .sunlit button.btn-disabled-resources:hover, .sunlit button.btn-disabled-cooldown, .sunlit button.btn-disabled-cooldown:hover, .sunlit li.disabled {
	border-color: #999;
	color: #666 !important;
}

.lvl13-element-secondary, .stats-indicator .value, .stats-indicator .value-total, .stats-indicator .change, .stats-indicator .forecast, span.msg-count, span.time, span.msg-camp-level {
	color: #bbb;
}

.sunlit .lvl13-element-secondary, .sunlit .stats-indicator .value, .sunlit .stats-indicator .value-total, .sunlit .stats-indicator .change, .sunlit .stats-indicator .forecast, .sunlit span.msg-count, .sunlit span.time, .sunlit msg-camp-level {
	color: #777;
}

.lvl13-text-disabled, span.action-cost-blocker, hr {
	color: #666;
}

hr {
	border:none;
	border-top:1px #666 solid;
	height: 1px;
}

.sunlit .lvl13-text-disabled, .sunlit span.action-cost-blocker, .sunlit hr {
	color: #999;
}

.sunlit hr {
	border:none;
	border-top:1px #999 solid;
	height: 1px;
}

.lvl13-text-fade, #log ul li.log-loaded, #log ul li.log-loaded span, .row-detail-indicator {
	color: #888;
}

.sunlit .lvl13-text-fade, .sunlit #log ul li.log-loaded, .sunlit #log ul li.log-loaded span, .sunlit .row-detail-indicator {
	color: #aaa;
}

.p-meta {
	color: rgba(255,255,255,0.5);
}

.p-dense, .p-dense p {
    margin: 0.25em 0;
}

.sunlit .p-meta {
	color: rgba(0,0,0,0.5);
}

.lvl13-element-overlay, button .cooldown-action, .cooldown-reqs {
	background-color: rgba(68, 68, 68, 0.5);
}

.progress-wrap {
	background-color: #444;
}

.sunlit .lvl13-element-overlay, .sunlit button .cooldown-action, .sunlit  .cooldown-reqs, div.vis-out-sector-visited {
	background-color: rgba(136, 136, 136, 0.3);
}

.sunlit .progress-wrap {
	background-color: #b3b3b3;
}

.lvl13-focus, li.item-focused, li.item-focused div.item-count, div.vis-out-sector-current, button:hover, a:hover {
	color: #fff !important;
	border-color: #aaa;
}

.sunlit .lvl13-focus, .sunlit li.item-focused, .sunlit li.item-focused div.item-count, .sunlit div.vis-out-sector-current, .sunlit button:hover, .sunlit a:hover {
	color: black !important;
	border-color: #4a4a4a;
}

.warning, .warning span, li.li-item-negative, .item-slot-lost .item-count {
	color: @color-global-warning !important;
}

.warning.progress-wrap {
	background: @color-global-warning !important;
}

.warning .progress-label {
	color: @color-dark-text !important;
}

.inventorybox-negative, .item-slot-lost .item-count {
    border: 1px solid #E13232 !important;
}

.li-item-negative {
	border: 1px solid #E13232 !important;
	background: rgba(230, 70, 70, 0.15) !important;
}

.sunlit .warning, .sunlit .warning span, .sunlit .li-item-negative {
	color: rgb(245, 0, 0) !important;
}

.sunlit .warning.progress-wrap {
	background: rgb(245, 0, 0) !important;
}

.sunlit .warning .progress-label {
	color: #202200 !important;
}

.sunlit .li-item-negative {
	border: 1px solid #ee1111 !important;
	background: rgba(245, 0, 0, 0.1) !important;
}

.item-slot-name, .item-slot-type-equipped {
    background-color: #333;
}

.sunlit .item-slot-name, .sunlit .item-slot-type-equipped {
    background-color: #ccc;
}

.lvl13-fade-down {
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(32, 34, 32, 1) 100% );
	background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(32, 34, 32, 1) 100% );
	background: -o-linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(32, 34, 32, 1) 100% );
	background: -moz-linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(32, 34, 32, 1) 100% );
}

.sunlit .lvl13-fade-down {
	background: -webkit-linear-gradient(rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0) 75%, rgba(253, 253, 253, 1) 100% );
	background: linear-gradient( rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0) 75%, rgba(253, 253, 253, 1) 100% );
	background: -o-linear-gradient( rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0) 75%, rgba(253, 253, 253, 1) 100% );
	background: -moz-linear-gradient( rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0) 75%, rgba(253, 253, 253, 1) 100% );
}

div.callout-arrow-up {
	border-bottom-color: #666 !important;
}

.sunlit div.callout-arrow-up {
	border-bottom-color: #aaa !important;
}

input, select, textarea {
   background-color: @color-dark-bg-input;
   color: @color-dark-text;
   border: 1px solid #333;
}

.sunlit input, .sunlit select, .sunlit textarea {
   background-color: @color-light-bg-input;
   color: @color-dark-bg;
   border: 1px solid #bbb;
}

input[type=range] {
    background: inherit;
    border: none;
}

.bubble {
    background-color: @color-dark-bg-alternative;
    color: @color-dark-bg;
}



/* -- Appearance: Specific elements: Menus and bars -- */

#tab-header { margin: 5px 0px }
#tab-header h2 { margin: 2px 0px; }
#grid-location-header { padding: 10px 0px 0px 0px; }

#log-overlay {
	height: 100%;
	max-width: 214px;
	width: 100%;
	position: inherit;
	pointer-events: none;
	top: 0;
}

#footer {
    padding: 1px 5px;
 }

 #unit-main {
     padding-left: 28px; /* for the self-bar */
 }

#header-self-bar {
     position: fixed;
     width: @header-self-bar-width;
     z-index: 5;
     text-align: center;
     padding: 5px 3px;
     margin-left: -80px;
     font-size: 80%;
}

#header-self-bar ul {
     margin-top: 10px;
     margin-bottom: 10px;
}

#header-self-bar > span {
    display: block;
}

#header-self-bar .stats-indicator {
    margin: 1px 0px;
    width: 100%;
    line-height: 1em;
}

#header-self-bar .callout-container {
    width: 100%;
}

#header-self-bar .stats-indicator .value {
    font-size: @font-size-small;
    margin: 3px 0;
}

#header-self-bar .info-callout {
    width: 75px;
    max-width: 75px;
}

#header-self-inout img {
    -webkit-transition: -webkit-transform 1s;
    transition: all 1s;
}

.location-outside #header-self-inout img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

ul.itemlist, ul.resultlist {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

.itemlist li {
	display: inline-flex;
}

.item, .res {
	vertical-align: middle;
	display: inline-flex;
	position: relative;
	margin: 2px;
	padding: 5px;
	border-width: 2px;
	border-style: solid;
    border-radius: 50%;
    width: @item-div-size;
    height: @item-div-size;
}

.res {
    border-radius: 0 !important;
    margin: 8px 6px 6px 6px !important;
    padding: 0px !important;
    border-width: 1px;
}

.item img, .li-item-negative img, .li-item-positive img {
	margin: -3px 0px 3px 0px;
	vertical-align: middle;
	height: 16px;
	width: 16px;
}

.res img {
    margin: -2px 1px 8px 1px;
	vertical-align: middle;
	height: 12px;
	width: 12px;
}

.item-focused, .blueprint:hover {
	border-width: 2px !important;
}

.item div.item-count, .res div.item-count {
	font-size: 75%;
	position: absolute;
	bottom: -0.9em;
	left: -2px;
	min-width: 100%;
	padding: 0 1px;
	line-height: 1em;
	text-align: center;
	z-index: 3;
}

li.item-with-count {
	margin-bottom: 1em;
}

ul.resultlist li {
	margin: 0px 3px;
	background-color: transparent;
}

ul.resultlist-positive li:before {
    content: "+ ";
}

.item-slot, .inventorybox ul li {
    background: inherit !important;
    margin: 0px 2px 2px 0px;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    display: inline-block;
    position: relative;
}

.item-comparison-indicator {
    background-size: 100%;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    width: 10px;
    height: 10px;
}

.item-comparison-badge {
    top: -11px;
    right: -11px;
    position: absolute;
    border-width: 1px;
    border-style: solid;
    border-color: @color-dark-highlight-element;
    padding: 2px;
    border-radius: 6px;
    background: @color-dark-bg-box-1;
}

.sunlit .item-comparison-badge {
    border-color: @color-light-highlight-element;
    background: @color-light-bg-box-1;
}

#resultlist-inventorymanagement-found ul li, #resultlist-loststuff-lost ul li {
    border-width: 0px;
}

.inventorybox-negative > li {
    opacity: 80%;
}

.item-slot-big {
    width: @item-slot-big-width;
    height: @item-slot-big-height;
}

.item-slot-small {
    width: 37px;
    height: 37px;
}

div.item-slot > div, div.item-slot > span {
    position: absolute;
    font-size: @font-size-small;
    cursor: default;
}

.item-slot-type-empty {
    text-align: center;
    width: @item-slot-big-width;
    height: @item-slot-big-height;
    line-height: @item-slot-big-height;
    display: inline-block;
    opacity: 0.25;
    font-style: oblique;
}

.item-slot-type-equipped {
    text-align: center;
    width: @item-slot-big-width;
    height: @item-slot-big-height;
    line-height: @item-slot-big-height;
    display: inline-block;
}

.item-slot-image {
    position: absolute;
}

.item-slot-big .item-slot-image {
    left: @item-slot-big-width / 2 - @item-div-size;
    top:  @item-slot-big-height / 2 - @item-div-size + 10px;
}

.item-slot-lost div {
}

.item-slot-name, .item-slot-type-equipped {
    width: 100%;
    text-align: center;
    overflow: hidden;
    line-height: 1.05em;
    height: auto;
    max-height: 1.9em;
    padding: 0.35em 0;
}

.item-slot-name {
    bottom: 0px;
    opacity: 0;
}

.item-slot-effect {
    display: none;
}

.item-slot-type-equipped {
    top: 0px;
}

.item-slot-simple {
    border-width: 0px !important;
}

.item-bag-options {
    margin-top: 5px;
}

.listheader {
	margin: 6px 0px 2px 0px;
	display: block;
}

#grid-main-header .unit {
    padding: 2px;
    position: relative;
}

#statsbar-resources .callout-container {
    width: 33%;
    border: 0px;
}

#bag-resources > .callout-container {
    max-width: 49%;
}

#header-tribe-container {
    margin-bottom: 5px;
}


/* -- Appearance: Specific elements: Visualizations -- */

table.vis {
	border-collapse: separate;
	margin: 0px auto;
	margin: 15px auto;
}

td.vis-out-sector-container {
    height: 20px;
    width: 20px;
    overflow: hidden;
    position: relative;
}

div.vis-out-sector {
	text-align: center;
	font-size: 50%;
    width: 18px;
    height: 18px;
}

div.vis-out-sector-null {
    border-width: 0px;
}

div.vis-out-blocker {
    background: red;
    width: 5px;
    height: 5px;
    position: absolute;
}

div.vis-out-blocker-north {
    top: 0;
    left: 13px;
}

div.vis-out-blocker-east {
    right: 0;
    top: 8px;
}

div.vis-out-blocker-south {
    bottom: 0;
    left: 13px;
}

div.vis-out-blocker-west {
    left: 0;
    top: 8px;
}

div.vis-out-blocker-NE {
    right: 0;
    top: 0;
}

div.vis-out-blocker-SE {
    right: 0;
    bottom: 0;
}

div.vis-out-blocker-SW {
    left: 0;
    bottom: 0;
}

div.vis-out-blocker-NW {
    left: 0;
    top: 0;
}

div.vis-out-blocker-null {
    background: none;
}

div.vis-out-blocker-3 {
    background: red;
}

div.vis-out-blocker-2 {
    background: green;
}

div.vis-out-blocker-1 {
    background: blue;
}

div.vis-out-sector-current {
    border-width: 2px;
}

.camp-overview-level-container {
    border-radius: 1.75em;
    text-align: center;
    font-size: 80%;
    width: 1.75em;
    margin: 2px;
    vertical-align: middle;
    background: inherit;
    font-weight: bold;
}

#camp-overview tr {
    border-style: solid;
    border-width: 1px;
}

.camp-overview-btn {
    text-align: center;
}

ul#game-options, ul#game-options-extended {
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 0px;
	line-height: 1em;
	display: table;
	float: right;
}

ul#game-options li, ul#game-options-extended li {
	list-style-type: none;
	display: table-cell;
    vertical-align: middle;
}

#game-version, #game-msg {
    text-transform: lowercase;
    position: relative;
    left: -55px;
}


/* Appearance: Specific elements: callouts and popups */

div.container-btn-action:hover + div.btn-callout, div.btn-callout:hover, .info-callout-target:hover + div.info-callout, div.info-callout:hover {
	display: block;
}

div.btn-callout, div.info-callout {
	text-align: left;
	display: none;
	position: absolute;
	width: 100%;
	min-width: 80px;
	z-index: 5;
	text-transform: none;
}

div.btn-callout {
	width: 100%;
	text-align: center;
	top: 37px;
	pointer-events: none;
	opacity: 0.95;
}

div.info-callout {
	width: auto;
	min-width: 50%;
	max-width: 100%;
}

div.info-callout-target {
    border-width: 0px;
    border-style: solid;
    padding: 0px;
    margin: 0px;
    cursor: help;
}

.item div.info-callout-target, .res div.info-callout-target, .resultlist li div.info-callout-target, .itemlist div.info-callout-target {
    border-width: 0px;
    background-color: inherit;
}

.info-callout-target-small + div.info-callout {
	width: auto !important;
	max-width: none !important;
	white-space: nowrap;
}

div.callout-container {
	position: relative;
	display: inline-block;
}

div.btn-callout-content, div.info-callout-content, div.popup {
	padding: 4px;
}

div.btn-callout-content, div.info-callout-content {
	font-size: @font-size-small;
	overflow-wrap: break-word;
    line-height: 1.45em;
}

span.action-risk {
    display: block;
}

div.info-callout-content {
    width: 100%;
    vertical-align: middle;
}

div.popup {
	padding: 20px;
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: 0;
	min-width: 30%;
	max-width: 60%;
	z-index: 7;
}

div.popup-overlay {
	position:fixed;
	top:0;
	left:0;
    z-index:6;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.85);
}

.sunlit div.popup-overlay {
    background-color: rgba(255,255,255,0.85);
}

div.callout-arrow-up {
	width: 0;
	height: 0;
	z-index: 40;
	position: relative;
	top: 0px;
    margin: 0 0 0 @callout-arrow-size/2;
	border-left: @callout-arrow-size solid transparent;
	border-right: @callout-arrow-size solid transparent;
	border-bottom: @callout-arrow-size solid;
}

div.btn-callout div.callout-arrow-up {
	margin: 0px auto;
}

.item div.callout-arrow-up {
	margin: 0 0 0 (@item-div-size/2 - @callout-arrow-size);
}

#header-self-bar div.callout-arrow-up {
	margin: 0 0 0 (@header-self-bar-width/2 - @callout-arrow-size);
}


/* Appearance: Specific elements: Buttons and tabs */

ul.tabs {
	margin: 0 0 5px 0;
    list-style-type: none;
	padding: 7px 0px;
}

ul.tabs li {
	display: inline;
	margin: 0px 5px 0px 0px;
	padding: 6px 10px;
	border-width: 1px !important;
    border-style: solid;
	position: relative;
	top: 2px;
	z-index: 3;
	white-space: nowrap;
	cursor: pointer;
	text-transform: lowercase;
    border-color: #333;
}

.sunlit ul.tabs li {
    border-color: #ddd;
}

ul.tabs li.selected {
	padding-bottom: 12px;
	font-weight: bold;
}

ul.tabs li:hover, button.btn-meta:hover {
	text-decoration: underline;
}

.bubble {
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 8px;
	font-weight: bold;
    font-size: 80%;
}

table .bubble {
    position: inherit;
    top: inherit;
    left: inherit;
}

button:active {
	position: relative;
	top: 1px;
}

button, ul.tabs li {
	transition: all 0.2s;
}

button {
	width: 95pt;
	padding: 8px 16px;
	margin: 4px;
	z-index: 2;
	font-weight: 500;
	position: relative;
	text-transform: lowercase;
}

button.action {
	border-width: 2px;
	margin: 0px;
	margin-bottom: 0px;
    white-space: nowrap;
}

button.action.multiline {
    white-space: normal;
}

button.btn-secondary {
    border-width: 1px;
}

button.action-move {
    width: 55px;
}

div.container-btn-action {
	display: inline-block;
	padding: -1px;
	margin: 4px 6px;
	border-width: 0px;
}

div.container-btn-action button {
	margin: -1px;
}

button.context {
	width: auto;
	display: inline;
	float: right;
}

.tab-options {
    float: right;
}

#in-game-date {
    float: right;
}

button.btn-wide {
	width: 110pt;
}
button.btn-narrow {
    width: 65pt;
}

button.btn-glyph {
  font-weight: bold;
  width: 1.5em;
  height: 1.5em;
  margin: 1px 2px;
  padding: 1px;
  font-size: 1em;
  vertical-align: middle;
  text-align: center;
  border-width: 1px;
  border-radius: 1px;
}

button.btn-mini {
   width: auto;
   padding: 4px 8px;
}

.info-callout button {
    padding: 4px 8px;
}

button.btn-meta {
	width: auto;
	padding: 2px 7px;
	border-radius: 0px !important;
	float: right;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background: none;
	border-width: 0px;
	text-transform: lowercase;
}

button.btn-disabled, li.disabled {
	opacity: 0.65;
	cursor: default !important;
}

button.btn-disabled-vision {
	opacity: 0.2;
    color: rgba(0,0,0,0) !important;
}

button.btn-disabled-vision:hover {
	opacity: 0.65;
}

button.btn-disabled-basic, button.btn-disabled-vision, button.btn-disabled-resources, li.disabled {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	font-weight: normal !important;
}

button.action.btn-disabled-basic, button.btn-disabled-vision, li.disabled {
	text-decoration: line-through !important;
}

button.action.btn-disabled-basic:before {
    content: "\00a0";
}

button.action.btn-disabled-basic:after {
    content: "\00a0";
}

.cooldown-reqs {
	height: 5px;
	width: 0%;
	padding: 0;
	border-width: 0px;
	transition: all 0.1s;
}

button .cooldown-action, button .cooldown-duration {
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0;
}


/* -- Appearance: All-purpose elements -- */


table.fullwidth {
	width: 100%;
}
table.spacious {
    margin: 5px 0px;
}
table.spacious td {
    padding: 2px 5px;
}
table.spacious td:last-child {
    padding-right: 0px;
}
table.spacious td:first-child {
    padding-left: 0px;
}

td.minwidth {
	width: 5%;
}

td.maxwidth {
	width: 95%;
}

table td {
	padding: 0px 2px;
}

table button, table div.container-btn-action {
	margin-left: 0px;
}

.list-option-dimmed .dimmable {
    opacity: 0.5;
}

hr {
	margin: 1em 5px;
}

.callout-container hr {
    margin: 0.25em 3px;
}

.stats-indicator {
	display: block;
	margin: 0 10px 0 0;
	white-space: nowrap;
}

.stats-indicator-secondary {
}

.stats-indicator span {
	display: inline-block;
	margin: auto 0 auto 1px;
}

.stats-indicator span.label {
    text-transform: lowercase;
}

.stats-indicator span.value {
	text-align: center;
    margin-left: 4px;
}

.stats-indicator .change, .stats-indicator .forecast {
	font-size: @font-size-small;
	vertical-align: middle;
}

.change-indicator  {
	width: 1em;
	height: 1em;
	display: inline-block;
	background-size: 100%;
	margin: 0px 2px;
	opacity: 0.75;
    vertical-align: middle;
}

#header-self-bar .change-indicator {
    vertical-align: top;
    margin: 0.2em 0 0 0.25em;
}

.indicator-fastincrease, .sunlit .bubble-fastincrease {
	background-image: url('../img/eldorado/icon-fastincrease-dark.png');
}

.indicator-increase, .sunlit .bubble-increase {
	background-image: url('../img/eldorado/icon-increase-dark.png');
}

.indicator-decrease, .sunlit .bubble-decrease {
	background-image: url('../img/eldorado/icon-decrease-dark.png');
}

.indicator-even, .sunlit .bubble-even {
	background-image: url('../img/eldorado/icon-even-dark.png');
	opacity: 0.25;
}

.sunlit .indicator-fastincrease, .bubble-fastincrease {
	background-image: url('../img/eldorado/icon-fastincrease.png');
}

.sunlit .indicator-increase, .bubble-increase {
	background-image: url('../img/eldorado/icon-increase.png');
}

.sunlit .indicator-decrease, .bubble-decrease {
	background-image: url('../img/eldorado/icon-decrease.png');
}

.sunlit .indicator-even, .bubble-even {
	background-image: url('../img/eldorado/icon-even.png');
	opacity: 0.25;
}

.item .indicator-decrease {
	opacity: 0.25;
}

#notification-player {
    padding: 0px;
    border-width: 1px;
    border-style: solid;
    margin-top: 5px;
    margin-bottom: 5px;
}

#notification-player .progress {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.actionbox, .infobox, .buttonbox {
	margin: 6px 0px;
}

.infobox {
	padding: 5px 0px 10px 0px;
}

.infobox-temporary {
	margin: 10px -5px;
	padding: 5px;
}

.infobox-scrollable {
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   overflow-y: auto;
   padding-left: 10px;
   padding-right: 10px;
   max-height: 12em;
}

.infobox-scrollable-header {
    margin: 1.5em 0 0 0;
}

.actionbox {
	padding: 3px 0px;
}

.inventorybox {
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    padding: 5px 0px 2px 0px;
    margin: 5px 0px;
    min-height: 1em;
    min-width: 1em;
    vertical-align: top;
}

.inventorydivision {
    width: 49%;
    display: table-cell;
    position: relative;
    vertical-align: top;
    padding-top: 2.5em;
    margin-top: -5px;
}

.inventorydivision-with-footer {
    padding-bottom: 2em;
}

.inventorydivision .inventorybox-header {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    padding: 5px 0;
}

.inventorydivision:first-child .inventorybox-header {
    border-radius: 10px 0 0 0;
}

.inventorydivision:last-child .inventorybox-header {
    border-radius: 0 10px 0 0;
}

.inventorydivision .inventorybox-footer {
    position: absolute;
    bottom: 3px;
    left: 0;
    margin: 0;
    width: 100%;

}

#common-popup .inventorybox ul {
    min-width: 380px;
    width: 100%;
}

.inventorybox ul, .ul-horizontal {
    padding: 0px;
    margin: 0px;
}

#trade-caravans-outgoing-container tr {
    border-width: 3px;
    border-bottom-width: 0px;
    border-style: solid;
    border-color: transparent;
}

#trade-caravans-outgoing-container tr.selected {
    border-color: @color-dark-bg-element;
}

.sunlit #trade-caravans-outgoing-container tr.selected {
    border-color: @color-light-bg-element;
}

.trade-caravans-outgoing-plan {
    border-width: 3px;
    border-top-width: 0px;
}

.row-detail-indicator {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
}

.header-section {
    display: inline-block;
    vertical-align: top;
    margin: 0px 5px 0px 0px;
    float: left;
    padding: 0px 2px;
}

#main-header-camp {
    width: 100%;
}

#main-header-bag {
    min-width: 20%;
    max-width: 25%;
}

#main-header-equipment {
    max-height: 122px;
    text-align: center;
    padding: 2px;
}

#main-header-items {
    min-width: 35px;
    max-width: 35%;
}

.full-width {
	width: 100%;
}

.stats-indicator .progress {
    height: 0.5em;
    width: 35px;
    display: inline-block;
    vertical-align: middle;
}

.stats-indicator .progress-wrap {
    margin: auto 1px auto 3px;
}

.strike-through {
	text-decoration: line-through;
	opacity: 0.9;
}

.action-separator {
	display: block;
	width: 10px;
	height: 10px;
}

span.time, span.msg-camp-level {
	font-size: 75%;
	vertical-align: middle;
}

.hidden {
    display: none;
}

span#out-position-indicator, span#out-position-indicator-header {
    font-size: 80%;
    line-height: 1.1em;
}

span.icon {
	padding: 2px;
}
span.hl-functionality {
   font-weight: bold;
}

span.action-cost-blocker-storage {
    text-decoration: line-through;
}

td.list-amount, td.list-storage {
	min-width: 35pt;
	text-align: center;
}

td.list-description {
    padding-left: 10px;
}

td.list-action {
    text-align: center;
    width: 100pt;
}

td.list-main {
    text-align: center;
}

td.item-name {
	min-width: 8em;
}

th.th-number {
	text-align: center;
}

th.th-text {
	text-align: left;
}

.stepper {
	text-align: center;
	min-width: 70px;
	vertical-align: middle;
	margin: 1px;
    white-space: nowrap;
}

input[type=range] {
    margin: 3px 5px;
    vertical-align: middle;
    cursor: pointer;
    height: 20px;
    -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: @color-dark-bg-input;
}
input[type=range]::-webkit-slider-thumb {
  border: 1px solid @color-dark-text-box-3;
  height: @size-input-range-thumb;
  width: @size-input-range-thumb;
  border-radius: @size-input-range-thumb;
  background: @color-dark-text;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: @color-dark-bg-input;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: @color-dark-bg-input;
}
input[type=range]::-moz-range-thumb {
  border: 1px solid @color-dark-text-box-3;
  height: @size-input-range-thumb;
  width: @size-input-range-thumb;
  border-radius: @size-input-range-thumb;
  background: @color-dark-text;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: @color-dark-text;
  border: 0px solid #000000;
  border-radius: 2px;
}
input[type=range]::-ms-fill-upper {
  background: @color-dark-text;
  border: 0px solid #000000;
  border-radius: 2px;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  border: 1px solid @color-dark-text-box-3;
  height: @size-input-range-thumb;
  width: @size-input-range-thumb;
  border-radius: @size-input-range-thumb;
  background: @color-dark-text;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: @color-dark-text;
}
input[type=range]:focus::-ms-fill-upper {
  background: @color-dark-text;
}

input.amount {
	width: 30pt;
	margin: 0;
	padding: 1px;
	text-align: center;
	border-width: 1px 0px;
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

select {
    margin: 0px 5px;
    padding: 1px 3px;
}

.stepper button {
	margin: 0;
}

.stepper button[data-type="minus"] {
	border-radius: 7px 0px 0px 7px;
}

.stepper button[data-type="plus"] {
	border-radius: 0px 7px 7px 0px;
}

.progress {
	width: 100%;
	max-width: 250px;
	height: 1em;
	border-width: 0px !important;
	line-height: 1.3;
}

.golden-small .progress {
	max-width: 100%;
}

.progress-wrap {
	margin: 6px auto;
	overflow: hidden;
	position: relative;
}

.progress-bar {
    left: 0;
    top: 0;
    position: absolute;
}

.progress-label {
    left: 0;
    top: 0;
    position: absolute;
	width: 100%;
	font-size: @font-size-small;
	text-align: center;
    vertical-align: text-top;
}

.centered {
    margin-left: auto;
    margin-right: auto;
}

.checkbox {
    width: 1em;
    height: 1em;
    border-width: 1px;
    border-style: solid;
    display: inline-block;
    margin: 1px 3px;
    vertical-align: middle;
	cursor: pointer;
}

.checkbox-label {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.blueprint-piece-box {
    width: 2em;
    height: 2em;
    display: inline-block;
    margin: 0px 3px;
    border-width: 2px;
    border-style: solid;
    position: relative;
}

.blueprint-piece-box img {
    position: absolute;
    top: 25%;
    left: 12%;
}

.collapsible-container {
    margin: 5px 0px;
}

.collapsible-header {
	cursor: pointer;
	margin: 0px;
	padding: 5px 10px;
	background-image: url('../img/open-iconic/arrow-circle-top-2x-dark.png');
	background-repeat: no-repeat;
	background-position: right 8px center;
}

.sunlit .collapsible-header {
	background-image: url('../img/open-iconic/arrow-circle-top-2x.png');
	background-repeat: no-repeat;
	background-position: right 8px center;
}

.collapsible-header.collapsible-collapsed {
	background-image: url('../img/open-iconic/arrow-circle-bottom-2x-dark.png');
	background-repeat: no-repeat;
	background-position: right 8px center;
}

.sunlit .collapsible-header.collapsible-collapsed {
	background-image: url('../img/open-iconic/arrow-circle-bottom-2x.png');
	background-repeat: no-repeat;
	background-position: right 8px center;
}

.collapsible-content {
	margin: 5px 10px;
}

#incoming-caravan-popup-multiplier {
    justify-content: flex-end;
    font-size: 85%;
    margin-bottom: 1em;
}

.horizontal-select {
    display: flex;
    align-items: center;
    margin: 2px 0;
}

.horizontal-select-title {
    background: @color-dark-bg-box-1;
    padding: 1px 8px;
}

.sunlit .horizontal-select-title {
    background: @color-light-bg-box-1;
}

.horizontal-select-list {
    padding: 0;
    margin: 0;
}

.horizontal-select-option {
    border: 1px solid #444;
    padding: 1px 5px;
    margin: 0 2px;
    display: inline-block;
    background: @color-dark-bg;
    cursor: pointer;
    border-radius: 3px;
}

.sunlit .horizontal-select-option {
    background: @color-light-bg;
}

.horizontal-select-option:hover {
    background: @color-dark-border-box-2;
    border-color: #666;
}

.sunlit .horizontal-select-option:hover {
    background: @color-light-border-box-2;
    border-color: #aaa;
}

.horizontal-select-option.selected {
    background: @color-dark-border-box-2;
}

.sunlit .horizontal-select-option.selected {
    background: @color-light-border-box-2;
}

.event-ending {
	animation: event-end 1.3s step-end infinite;
	animation-timing-function: ease-in-out;
}

@keyframes event-end {
	0%	{opacity: inherit}
	50%	{opacity: 0.4}
}

.changelog-type {
   padding: 2px 5px;
   border-width: 1px;
   border-style: solid;
   margin: 0px 5px 0px 0px;
}

#changelog {
    font-size: 85%;
    margin-left: 10px;
    margin-right: 10px;
}

#changelog ul {
    padding: 0 0 0 2em;
    margin: 0.25em 0 1em 0;
    list-style-type: none;
}

#changelog li {
    position: relative;
    line-height: 1.35em;
}

#changelog li:before{
    width: 7px;
    height: 7px;
    background: @color-dark-text-box-3;
    color: @color-dark-text-box-3;
    content: ".";
    position: absolute;
    left: -1em;
    top: 0.375em;
    display: inline-block;
    overflow: hidden;
}
